<template>
  <div id="app">
    <Layout/>
  </div>
</template>

<script>
import {LOGIN_PATH} from "./assets/js/define";
import {Watermark} from "watermark-js-plus";
import {mapActions} from "vuex";
import Layout from "./views/Layout/index.vue";

const acts = [
  "refreshAftersale",
  // "refreshAuthority",
  "refreshDirectory",
  "refreshRole",
  "refreshArea", //获取仓库
  "refreshAccount", //获取人员列表
  "refreshLeader", //获取上级
  'refreshAreaLedgerType',
  'getAzItems',
  // 'refreshStoreLedgerStore',
  // 'refreshStoreLedgerType',
];
export default {
  components: {
    Layout,
  },
  data() {
    return {
      logoutTimer: null,
      timeout: 60 * 60 * 1000 // 10 分钟 = 600000ms
    }
  },
  created() {
    //通用暂时先关闭 不知道哪里在用
    acts.forEach((k) => this[k]());
  },
  mounted() {
    try {
      const {userName = "", phoneNum = ""} = this.$store.state.userData || {};
      const watermark = new Watermark({
        content: `${userName || ""} ${phoneNum || ""}`,
        width: 240,
        height: 240,
        fontColor: "rgba(0,0,0,0.3)",
      });
      watermark.create();
    } catch (e) {
    }
    this.startTimer()
    // 监听用户交互事件
    document.addEventListener('mousemove', this.resetTimer)
    document.addEventListener('keydown', this.resetTimer)
    document.addEventListener('click', this.resetTimer)
    document.addEventListener('scroll', this.resetTimer)
  },
  beforeDestroy() {
    // 组件销毁时移除监听
    document.removeEventListener('mousemove', this.resetTimer)
    document.removeEventListener('keydown', this.resetTimer)
    document.removeEventListener('click', this.resetTimer)
    document.removeEventListener('scroll', this.resetTimer)
    clearTimeout(this.logoutTimer)
  },
  methods: {
    ...mapActions(acts),
    startTimer() {
      this.logoutTimer = setTimeout(() => {
        this.handleLogout()
      }, this.timeout)
    },
    resetTimer() {
      clearTimeout(this.logoutTimer)
      this.startTimer()
    },
    handleLogout() {
      // 清除 token
      if (this.$route.path === '/login') {
        return
      }
      this.$api.userLogout().then(res => {
        this.$quinn.removeStorage("token");
        this.$quinn.removeStorage("userData");
        alert('长时间未操作，请重新登录！')
        window.location.href = LOGIN_PATH
      })
    }
  },
};
</script>

<style lang="less">
@textColor: #19F5FF;
.date {
  background-color: transparent;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-image: url('../src/assets/img/bg.png') !important;
  border-color: #0193df !important;

  .el-picker-panel__icon-btn {
    color: @textColor;
  }

  .el-picker-panel__sidebar {
    background: transparent !important;
  }

  .available {
    color: #a6cdff;
  }

  .in-range span {
    color: #333;
  }

  .start-date span {
    color: @textColor !important;
    background-color: #065aa4 !important;
  }

  .end-date span {
    color: @textColor !important;
    background-color: #065aa4 !important;
  }

  .el-date-range-picker__header div {
    color: #a6cdff;
  }

  .el-picker-panel__shortcut {
    color: #a6cdff;
  }

  .el-picker-panel__body > div, .el-picker-panel__sidebar, .el-date-table th {
    border-color: #0193df !important;
  }

  .el-date-table th {
    color: @textColor;
  }

  .el-date-table td.in-range div, .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div {
    background-color: rgba(255, 255, 255, 0.12) !important;

    span {
      // color:#a6cdff !important;
      color: @textColor;
    }
  }
}
</style>

